<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaScript知识点总结 | MyBlog</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/markdown-blog/favicon.ico">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/markdown-blog/assets/css/0.styles.25640b18.css" as="style"><link rel="preload" href="/markdown-blog/assets/js/app.4ad08097.js" as="script"><link rel="preload" href="/markdown-blog/assets/js/3.ddd67056.js" as="script"><link rel="preload" href="/markdown-blog/assets/js/1.7a25059f.js" as="script"><link rel="preload" href="/markdown-blog/assets/js/28.1d169f61.js" as="script"><link rel="prefetch" href="/markdown-blog/assets/js/10.f00be53f.js"><link rel="prefetch" href="/markdown-blog/assets/js/11.7ac2e99b.js"><link rel="prefetch" href="/markdown-blog/assets/js/12.f11c009c.js"><link rel="prefetch" href="/markdown-blog/assets/js/13.be750ad0.js"><link rel="prefetch" href="/markdown-blog/assets/js/14.09d576e3.js"><link rel="prefetch" href="/markdown-blog/assets/js/15.b4c1727e.js"><link rel="prefetch" href="/markdown-blog/assets/js/16.4890e6f7.js"><link rel="prefetch" href="/markdown-blog/assets/js/17.feac5f26.js"><link rel="prefetch" href="/markdown-blog/assets/js/18.b49467b1.js"><link rel="prefetch" href="/markdown-blog/assets/js/19.29b4407f.js"><link rel="prefetch" href="/markdown-blog/assets/js/20.9ee55973.js"><link rel="prefetch" href="/markdown-blog/assets/js/21.b6da110b.js"><link rel="prefetch" href="/markdown-blog/assets/js/22.c64d89ab.js"><link rel="prefetch" href="/markdown-blog/assets/js/23.1249a0d2.js"><link rel="prefetch" href="/markdown-blog/assets/js/24.858426bc.js"><link rel="prefetch" href="/markdown-blog/assets/js/25.1eaccce9.js"><link rel="prefetch" href="/markdown-blog/assets/js/26.6d8a66e7.js"><link rel="prefetch" href="/markdown-blog/assets/js/27.bef6e2f6.js"><link rel="prefetch" href="/markdown-blog/assets/js/29.f6bd6a28.js"><link rel="prefetch" href="/markdown-blog/assets/js/30.6b0a16e0.js"><link rel="prefetch" href="/markdown-blog/assets/js/31.3a6f1d19.js"><link rel="prefetch" href="/markdown-blog/assets/js/4.46f777c5.js"><link rel="prefetch" href="/markdown-blog/assets/js/5.db5e4405.js"><link rel="prefetch" href="/markdown-blog/assets/js/6.8b37b343.js"><link rel="prefetch" href="/markdown-blog/assets/js/7.cacb4248.js"><link rel="prefetch" href="/markdown-blog/assets/js/8.6174f008.js"><link rel="prefetch" href="/markdown-blog/assets/js/9.4f9a61ea.js">
    <link rel="stylesheet" href="/markdown-blog/assets/css/0.styles.25640b18.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container" data-v-1aefc0b4><div data-v-1aefc0b4><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-1aefc0b4 data-v-1aefc0b4><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>MyBlog</h3> <p class="description" data-v-25ba6db2 data-v-25ba6db2></p> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>kasnars</span>
            
          <span data-v-25ba6db2>2021 - </span>
          2024
        </a></span></div></div> <div class="hide" data-v-1aefc0b4><header class="navbar" data-v-1aefc0b4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/markdown-blog/" class="home-link router-link-active"><img src="/markdown-blog/wsq.webp" alt="MyBlog" class="logo"> <span class="site-name">MyBlog</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/markdown-blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><a href="/markdown-blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/markdown-blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/markdown-blog/docs/theme-reco/" class="nav-link router-link-active"><i class="undefined"></i>
  前端知识点
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/docs/computer/" class="nav-link"><i class="undefined"></i>
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/docs/others/" class="nav-link"><i class="undefined"></i>
  其他技术栈
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/个人作品/" class="nav-link"><i class="undefined"></i>
  个人作品
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/解决方案/" class="nav-link"><i class="undefined"></i>
  解决方案
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/BUG记录/" class="nav-link"><i class="undefined"></i>
  BUG记录
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/技术整理/" class="nav-link"><i class="undefined"></i>
  技术整理
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/前端总结/" class="nav-link"><i class="undefined"></i>
  前端总结
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      链接
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/kasnars" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://juejin.cn/user/2287450072292567" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-juejin"></i>
  稀土掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-1aefc0b4></div> <aside class="sidebar" data-v-1aefc0b4><div class="personal-info-wrapper" data-v-39576ba9 data-v-1aefc0b4><img src="/markdown-blog/wsqgif.gif" alt="author-avatar" class="personal-img" data-v-39576ba9> <h3 class="name" data-v-39576ba9>
    kasnars
  </h3> <div class="num" data-v-39576ba9><div data-v-39576ba9><h3 data-v-39576ba9>21</h3> <h6 data-v-39576ba9>Articles</h6></div> <div data-v-39576ba9><h3 data-v-39576ba9>14</h3> <h6 data-v-39576ba9>Tags</h6></div></div> <ul class="social-links" data-v-39576ba9></ul> <hr data-v-39576ba9></div> <nav class="nav-links"><div class="nav-item"><a href="/markdown-blog/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><a href="/markdown-blog/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><a href="/markdown-blog/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      文档
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/markdown-blog/docs/theme-reco/" class="nav-link router-link-active"><i class="undefined"></i>
  前端知识点
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/docs/computer/" class="nav-link"><i class="undefined"></i>
  计算机基础
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/docs/others/" class="nav-link"><i class="undefined"></i>
  其他技术栈
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/个人作品/" class="nav-link"><i class="undefined"></i>
  个人作品
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/解决方案/" class="nav-link"><i class="undefined"></i>
  解决方案
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/BUG记录/" class="nav-link"><i class="undefined"></i>
  BUG记录
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/技术整理/" class="nav-link"><i class="undefined"></i>
  技术整理
</a></li><li class="dropdown-item"><!----> <a href="/markdown-blog/categories/前端总结/" class="nav-link"><i class="undefined"></i>
  前端总结
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      链接
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/kasnars" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://juejin.cn/user/2287450072292567" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-juejin"></i>
  稀土掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><a href="/markdown-blog/docs/theme-reco/htmlcss.html" class="sidebar-link">HTML+CSS知识点总结</a></li><li><a href="/markdown-blog/docs/theme-reco/js.html" aria-current="page" class="active sidebar-link">JavaScript知识点总结</a></li><li><a href="/markdown-blog/docs/theme-reco/ts.html" class="sidebar-link">TypeScript知识点总结</a></li><li><a href="/markdown-blog/docs/theme-reco/vue.html" class="sidebar-link">Vue知识点总结</a></li><li><a href="/markdown-blog/docs/theme-reco/react.html" class="sidebar-link">React知识点总结</a></li></ul> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>JavaScript知识点总结</h3> <!----> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>kasnars</span>
            
          <span data-v-25ba6db2>2021 - </span>
          2024
        </a></span></div></div> <div data-v-1aefc0b4><main class="page" style="padding-right:0;"><section><div class="page-title"><h1 class="title">JavaScript知识点总结</h1> <div data-v-f875f3fc><i class="iconfont reco-account" data-v-f875f3fc><span data-v-f875f3fc>kasnars</span></i> <i class="iconfont reco-date" data-v-f875f3fc><span data-v-f875f3fc>2/15/2022</span></i> <i class="iconfont reco-eye" data-v-f875f3fc><span id="/markdown-blog/docs/theme-reco/js.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-f875f3fc><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="tags iconfont reco-tag" data-v-f875f3fc><span class="tag-item" data-v-f875f3fc>JavaScript</span><span class="tag-item" data-v-f875f3fc>面经</span></i></div></div> <div class="theme-reco-content content__default"><h1 id="javascript知识点总结"><a href="#javascript知识点总结" class="header-anchor">#</a> JavaScript知识点总结</h1> <h2 id="语法基础"><a href="#语法基础" class="header-anchor">#</a> 语法基础</h2> <h3 id="值类型与引用类型"><a href="#值类型与引用类型" class="header-anchor">#</a> 值类型与引用类型</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>值类型复制后改变值不会改变原始值，而引用类型改变会导致原先的值也被改变</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">1</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a
b<span class="token operator">++</span>
<span class="token comment">// a   1</span>
<span class="token comment">// b   2</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">c</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span>
<span class="token keyword">let</span> b <span class="token operator">=</span> a
b<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token number">2</span>
<span class="token comment">// a.c   2</span>
<span class="token comment">// b.c   2</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>值类型的值直接存在栈中，而引用类型值存在堆中，栈中存放的只是引用地址</li></ul></details> <h3 id="值类型和引用类型分开处理的原因"><a href="#值类型和引用类型分开处理的原因" class="header-anchor">#</a> 值类型和引用类型分开处理的原因</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>提高性能</li> <li>减少内存消耗</li></ul></details> <h3 id="typeof方法可以识别哪些类型"><a href="#typeof方法可以识别哪些类型" class="header-anchor">#</a> typeof方法可以识别哪些类型</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>识别出所有的值类型</li> <li>识别函数</li> <li>判断是否为引用类型（Object）数组对象用typeof全部返回object</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>               <span class="token comment">// number</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>            <span class="token comment">// boolean</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token string">'str'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>           <span class="token comment">// string</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>              <span class="token comment">// object    </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// function</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>              <span class="token comment">// object</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// undefined</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>            <span class="token comment">// object</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></details> <h3 id="instanceof"><a href="#instanceof" class="header-anchor">#</a> instanceof</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>instanceof可以正确判断对象的类型，其内部运行机制是判断在其原型链中能否找到该类型的原型。</li> <li>instanceof只能正确判断引用数据类型，而不能判断基本数据类型</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span> <span class="token keyword">instanceof</span> <span class="token class-name">Number</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token boolean">true</span> <span class="token keyword">instanceof</span> <span class="token class-name">Boolean</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                <span class="token comment">// false </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'str'</span> <span class="token keyword">instanceof</span> <span class="token class-name">String</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                <span class="token comment">// false </span>
 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token keyword">instanceof</span> <span class="token class-name">Array</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                    <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token keyword">instanceof</span> <span class="token class-name">Function</span><span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                   <span class="token comment">// true</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></details> <h3 id="什么时候出现字符串拼接"><a href="#什么时候出现字符串拼接" class="header-anchor">#</a> 什么时候出现字符串拼接</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>只要加号两边有一个为字符串，则此“+”被视为字符串拼接</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token boolean">true</span> <span class="token operator">+</span> <span class="token string">'10'</span> <span class="token comment">//true10</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></details> <h3 id="constructor有什么用"><a href="#constructor有什么用" class="header-anchor">#</a> constructor有什么用</h3> <details class="custom-block details"><summary>答案</summary> <ol><li>用作构造函数</li> <li>用来判断类型</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span>constructor <span class="token operator">===</span> Number<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">.</span>constructor <span class="token operator">===</span> Boolean<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token string">'str'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>constructor <span class="token operator">===</span> String<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span>constructor <span class="token operator">===</span> Array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>constructor <span class="token operator">===</span> Function<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span>constructor <span class="token operator">===</span> Object<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul><li>如果原型被改变的话，则不能通过构造函数访问他的类型</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">Fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
 
<span class="token class-name">Fn</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
<span class="token keyword">var</span> f <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span>constructor<span class="token operator">===</span>Fn<span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span>constructor<span class="token operator">===</span>Array<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></details> <h3 id="object-prototype-tostring-call"><a href="#object-prototype-tostring-call" class="header-anchor">#</a> Object.prototype.toString.call()</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>使用 Object 对象的原型方法 toString 来判断数据类型：</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">;</span>
 
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">'str'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">a</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div></details> <h3 id="同样是检测对象obj调用tostring方法-obj-tostring-的结果和object-prototype-tostring-call-obj-的结果不一样-这是为什么"><a href="#同样是检测对象obj调用tostring方法-obj-tostring-的结果和object-prototype-tostring-call-obj-的结果不一样-这是为什么" class="header-anchor">#</a> 同样是检测对象obj调用toString方法，obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样，这是为什么？</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>这是因为toString是Object的原型方法，而Array、function等类型作为Object的实例，都重写了toString方法。</li></ul></details> <h3 id="判断是否为数组的方式有哪些"><a href="#判断是否为数组的方式有哪些" class="header-anchor">#</a> 判断是否为数组的方式有哪些</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>Object.prototype.toString.call()</li> <li>通过原型链做判断</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>obj<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>通过ES6的Array.isArray()做判断</li> <li>通过instanceof做判断</li> <li>通过Array.prototype.isPrototypeOf</li></ul></details> <h3 id="null和undefined区别"><a href="#null和undefined区别" class="header-anchor">#</a> null和undefined区别</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null</li> <li>undefined 代表的含义是未定义，null 代表的含义是空对象</li> <li>一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。</li></ul></details> <h3 id="typeof-null-的结果是什么-为什么"><a href="#typeof-null-的结果是什么-为什么" class="header-anchor">#</a> typeof null 的结果是什么，为什么？</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>typeof null 的结果是Object。</li> <li>null的类型标签也是000，和Object的类型标签一样，所以会被判定为Object。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// js底层数据标签（机器码）</span>
<span class="token number">000</span><span class="token operator">:</span> object   <span class="token operator">-</span> 当前存储的数据指向一个对象。
  <span class="token number">1</span><span class="token operator">:</span> int      <span class="token operator">-</span> 当前存储的数据是一个 <span class="token number">31</span> 位的有符号整数。
<span class="token number">010</span><span class="token operator">:</span> double   <span class="token operator">-</span> 当前存储的数据指向一个双精度的浮点数。
<span class="token number">100</span><span class="token operator">:</span> string   <span class="token operator">-</span> 当前存储的数据指向一个字符串。
<span class="token number">110</span><span class="token operator">:</span> boolean  <span class="token operator">-</span> 当前存储的数据是布尔值。
<span class="token comment">// null全为0 与obj相同</span>
<span class="token comment">// undefined的值是 (-2)30(一个超出整数范围的数字)；</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div></details> <h3 id="instanceof原理以及实现-手撕instanceof"><a href="#instanceof原理以及实现-手撕instanceof" class="header-anchor">#</a> instanceof原理以及实现(手撕instanceof)</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">myInstanceof</span><span class="token punctuation">(</span><span class="token parameter">left<span class="token punctuation">,</span> right</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 获取对象的原型</span>
  <span class="token keyword">let</span> proto <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>left<span class="token punctuation">)</span>
  <span class="token comment">// 获取构造函数的 prototype 对象</span>
  <span class="token keyword">let</span> prototype <span class="token operator">=</span> right<span class="token punctuation">.</span>prototype<span class="token punctuation">;</span> 
 
  <span class="token comment">// 判断构造函数的 prototype 对象是否在对象的原型链上</span>
  <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>proto<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>proto <span class="token operator">===</span> prototype<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token comment">// 如果没有找到，就继续从其原型上找，Object.getPrototypeOf方法用来获取指定对象的原型</span>
    proto <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>proto<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></details> <h3 id="为什么0-1-0-2-0-3-如何让其相等"><a href="#为什么0-1-0-2-0-3-如何让其相等" class="header-anchor">#</a> 为什么0.1+0.2 ! == 0.3，如何让其相等</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>遵循IEEE 754标准，使用64位固定长度来表示 浮点运算精度丢失</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">(</span>n1 <span class="token operator">+</span> n2<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token comment">// 注意，toFixed为四舍五入</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></details> <h3 id="如何获取安全的undefined值"><a href="#如何获取安全的undefined值" class="header-anchor">#</a> 如何获取安全的undefined值</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>因为undefined是一个标识符，所有可以被用来当作变量使用和赋值，但是会影响正常判断，想要获取安全的undefined可以通过void 0 来获取</li></ul></details> <h3 id="type-of-nan"><a href="#type-of-nan" class="header-anchor">#</a> type of NaN？</h3> <details class="custom-block details"><summary>答案</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">typeof</span> <span class="token number">NaN</span><span class="token punctuation">;</span> <span class="token comment">// &quot;number&quot;</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>NaN 是一个特殊值，它和自身不相等，是唯一一个非自反（自反，reflexive，即 x === x 不成立）的值。而 NaN !== NaN 为 true。</li></ul></details> <h3 id="isnan-和-number-isnan-函数的区别"><a href="#isnan-和-number-isnan-函数的区别" class="header-anchor">#</a> isNaN 和 Number.isNaN 函数的区别？</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。</li> <li>函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。</li> <li><em>总结：Number.isNaN会先判断是不是数字，而isNaN不会，导致isNaN判断非数字的值时会直接返回NaN</em></li></ul></details> <h3 id="的转换规则"><a href="#的转换规则" class="header-anchor">#</a> ==的转换规则</h3> <details class="custom-block details"><summary>答案</summary> <ol><li>首先会判断两者类型是否相同，相同的话就比较两者的大小；</li> <li>类型不相同的话，就会进行类型转换；</li> <li>会先判断是否在对比 null 和 undefined，是的话就会返回 true</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">null</span> <span class="token operator">==</span> <span class="token keyword">undefined</span>   <span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="4"><li>判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number</li> <li>判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断</li> <li>判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c451c19e23dd4726b3f36223b6c18a1e~tplv-k3u1fbpfcp-watermark.awebp" alt=""></li></ol></details> <h3 id="其他值转字符串的规则"><a href="#其他值转字符串的规则" class="header-anchor">#</a> 其他值转字符串的规则</h3> <details class="custom-block details"><summary>答案</summary> <ol><li>Null 和 Undefined 类型 ，null 转换为 &quot;null&quot;，undefined 转换为 &quot;undefined&quot;</li> <li>Boolean 类型，true 转换为 &quot;true&quot;，false 转换为 &quot;false&quot;</li> <li>Number 类型的值直接转换，不过那些极小和极大的数字会使用指数形式</li> <li>Symbol 类型的值直接转换，但是只允许显式强制类型转换，使用隐式强制类型转换会产生错误</li> <li>对普通对象来说，除非自行定义 toString() 方法，否则会调用 toString()（Object.prototype.toString()）来返回内部属性 [[Class]] 的值，如&quot;[object Object]&quot;。如果对象有自己的 toString() 方法，字符串化时就会调用该方法并使用其返回值。</li></ol></details> <h3 id="其他值到数字值的转换规则"><a href="#其他值到数字值的转换规则" class="header-anchor">#</a> 其他值到数字值的转换规则？</h3> <details class="custom-block details"><summary>答案</summary> <ol><li>Undefined 类型的值转换为 NaN。</li> <li>Null 类型的值转换为 0。</li> <li>Boolean 类型的值，true 转换为 1，false 转换为 0。</li> <li>String 类型的值转换如同使用 Number() 函数进行转换，如果包含非数字值则转换为 NaN，空字符串为 0。</li> <li>Symbol 类型的值不能转换为数字，会报错。</li> <li>对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。</li></ol></details> <h3 id="哪些值在转换为布尔值的时候会被转为false"><a href="#哪些值在转换为布尔值的时候会被转为false" class="header-anchor">#</a> 哪些值在转换为布尔值的时候会被转为false</h3> <details class="custom-block details"><summary>答案</summary> <div class="language-js line-numbers-mode"><pre class="language-js"><code>以下这些是假值： • <span class="token keyword">undefined</span> • <span class="token keyword">null</span> • <span class="token boolean">false</span> • <span class="token operator">+</span><span class="token number">0</span>、<span class="token operator">-</span><span class="token number">0</span> 和 <span class="token number">NaN</span> • <span class="token string">&quot;&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>除了这7个值以外都会被转为true</li></ul></details> <h3 id="object-is-与比较操作符-、-的区别"><a href="#object-is-与比较操作符-、-的区别" class="header-anchor">#</a> Object.is() 与比较操作符 “===”、“==” 的区别？</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>使用双等号（==）进行相等判断时，如果两边的类型不一致，则会进行强制类型转化后再进行比较。</li> <li>使用三等号（===）进行相等判断时，如果两边的类型不一致时，不会做强制类型准换，直接返回 false。</li> <li>使用 Object.is 来进行相等判断时，一般情况下和三等号的判断相同，它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 是相等的。</li></ul></details> <h3 id="什么是-javascript-中的包装类型"><a href="#什么是-javascript-中的包装类型" class="header-anchor">#</a> 什么是 JavaScript 中的包装类型？</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象.</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token string">&quot;abc&quot;</span><span class="token punctuation">;</span>
a<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment">// 3</span>
a<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;ABC&quot;</span>
<span class="token comment">// 在访问'abc'.length时，JavaScript 将'abc'在后台转换成String('abc')，然后再访问其length属性。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>JavaScript也可以使用Object函数显式地将基本类型转换为包装类型</li> <li>也可以使用valueOf方法将包装类型倒转成基本类型</li></ul></details> <h3 id="new一个对象的过程"><a href="#new一个对象的过程" class="header-anchor">#</a> new一个对象的过程</h3> <details class="custom-block details"><summary>答案</summary> <ol><li>创建一个对象</li> <li>将构造函数的作用域赋给新对象（也就是将对象的__proto__属性指向构造函数的prototype属性）</li> <li>指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）</li> <li>返回新的对象</li></ol></details> <h2 id="es6"><a href="#es6" class="header-anchor">#</a> es6</h2> <h3 id="let、const、var的区别"><a href="#let、const、var的区别" class="header-anchor">#</a> let、const、var的区别</h3> <details class="custom-block details"><summary>答案</summary> <ol><li>块级作用域</li> <li>变量提升</li> <li>给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。</li> <li>重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。</li> <li>暂时性死区</li> <li>初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。</li> <li>指针指向： let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。</li></ol></details> <h3 id="const对象的属性可以修改吗"><a href="#const对象的属性可以修改吗" class="header-anchor">#</a> const对象的属性可以修改吗</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>const保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），其值就保存在变量指向的那个内存地址，因此等同于常量。</li></ul></details> <h3 id="new一个箭头函数会怎么样"><a href="#new一个箭头函数会怎么样" class="header-anchor">#</a> new一个箭头函数会怎么样</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数。</li></ul></details> <h3 id="箭头函数与普通函数的区别"><a href="#箭头函数与普通函数的区别" class="header-anchor">#</a> 箭头函数与普通函数的区别</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>箭头函数比普通函数更加简洁</li> <li>箭头函数没有自己的this</li> <li>箭头函数继承来的this指向永远不会改变</li> <li>call()、apply()、bind()等方法不能改变箭头函数中this的指向</li> <li>箭头函数不能作为构造函数使用</li> <li>箭头函数没有自己的arguments</li> <li>箭头函数没有prototype</li> <li>箭头函数不能用作Generator函数，不能使用yeild关键字</li></ul></details> <h3 id="箭头函数的this指向哪里"><a href="#箭头函数的this指向哪里" class="header-anchor">#</a> 箭头函数的this指向哪里</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this</li></ul></details> <h3 id="proxy可以实现什么功能"><a href="#proxy可以实现什么功能" class="header-anchor">#</a> Proxy可以实现什么功能</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>在 Vue3.0 中通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。</li> <li>Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>
<span class="token comment">// target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></details> <h3 id="对-rest-参数的理解"><a href="#对-rest-参数的理解" class="header-anchor">#</a> 对 rest 参数的理解</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>扩展运算符被用在函数形参上时，它还可以把一个分离的参数序列整合成一个数组</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">mutiple</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> val <span class="token keyword">of</span> args<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    result <span class="token operator">*=</span> val<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">mutiple</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span> <span class="token comment">// 24</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div></details> <h2 id="javascript基础"><a href="#javascript基础" class="header-anchor">#</a> JavaScript基础</h2> <h3 id="new操作符的实现原理"><a href="#new操作符的实现原理" class="header-anchor">#</a> new操作符的实现原理</h3> <details class="custom-block details"><summary>答案</summary> <ol><li>首先创建了一个新的空对象</li> <li>设置原型，将对象的原型设置为函数的 prototype 对象。</li> <li>让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）</li> <li>判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。</li></ol></details> <h3 id="map和objct的区别"><a href="#map和objct的区别" class="header-anchor">#</a> Map和Objct的区别</h3> <details class="custom-block details"><summary>答案</summary> <table><thead><tr><th></th> <th>Map</th> <th>Object</th></tr></thead> <tbody><tr><td>意外的键</td> <td>Map默认情况不包含任何键，只包含显式插入的键</td> <td>Object 有一个原型, 原型链上的键名有可能和自己在对象上的设置的键名产生冲突。</td></tr> <tr><td>键的类型</td> <td>Map的键可以是任意值，包括函数、对象或任意基本类型。</td> <td>Object 的键必须是 String 或是Symbol。</td></tr> <tr><td>键的顺序</td> <td>Map 中的 key 是有序的。因此，当迭代的时候， Map 对象以插入的顺序返回键值</td> <td>Object 的键是无序的</td></tr> <tr><td>Size</td> <td>Map 的键值对个数可以轻易地通过size 属性获取</td> <td>Object 的键值对个数只能手动计算</td></tr> <tr><td>迭代</td> <td>Map 是 iterable 的，所以可以直接被迭代</td> <td>迭代Object需要以某种方式获取它的键然后才能迭代。</td></tr> <tr><td>性能</td> <td>在频繁增删键值对的场景下表现更好。</td> <td>在频繁添加和删除键值对的场景下未作出优化。</td></tr></tbody></table></details> <h3 id="map和weakmap的区别"><a href="#map和weakmap的区别" class="header-anchor">#</a> map和weakMap的区别</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。但是 WeakMap 只接受对象作为键名（ null 除外），不接受其他类型的值作为键名。而且 WeakMap 的键名所指向的对象，不计入垃圾回收机制。</li></ul></details> <h3 id="对json的理解"><a href="#对json的理解" class="header-anchor">#</a> 对Json的理解</h3> <details class="custom-block details"><summary>答案</summary> <ul><li><p>JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。</p></li> <li><p>因为 JSON 的语法是基于 js 的，因此很容易将 JSON 和 js 中的对象弄混，但是应该注意的是 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。</p></li></ul></details> <h3 id="javascript脚本延迟加载的方式有哪些"><a href="#javascript脚本延迟加载的方式有哪些" class="header-anchor">#</a> JavaScript脚本延迟加载的方式有哪些？</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>defer 属性： 给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。</li> <li>async 属性： 给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。</li> <li>动态创建 DOM 方式： 动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。</li> <li>使用 setTimeout 延迟方法： 设置一个定时器来延迟加载js脚本文件
让 JS 最后加载： 将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。</li></ul></details> <h3 id="如何遍历类数组"><a href="#如何遍历类数组" class="header-anchor">#</a> 如何遍历类数组</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>使用call方法</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 
  <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">,</span> <span class="token parameter">a</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ul><li>使用Array.from方法将类数组转化成数组</li> <li>使用展开运算符将类数组转化成数组</li></ul></details> <h3 id="es6模块与commonjs模块有什么异同"><a href="#es6模块与commonjs模块有什么异同" class="header-anchor">#</a> ES6模块与CommonJS模块有什么异同</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>不同
<ul><li>CommonJS是对模块的浅拷⻉，ES6 Module是对模块的引⽤，即ES6 Module只存只读，不能改变其值，也就是指针指向不能变，类似const</li> <li>import的接⼝是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向，可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错</li></ul></li> <li>共同点
<ul><li>CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值，即对对象内部属性的值进⾏改变。</li></ul></li></ul></details> <h3 id="如何判断一个对象是否属于某个类"><a href="#如何判断一个对象是否属于某个类" class="header-anchor">#</a> 如何判断一个对象是否属于某个类</h3> <details class="custom-block details"><summary>答案</summary> <ul><li>第一种方式，使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。</li> <li>第二种方式，通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，但是这种方式不是很安全，因为 constructor 属性可以被改写。</li> <li>第三种方式，如果需要判断的是某个内置的引用类型的话，可以使用 Object.prototype.toString() 方法来打印对象的[[Class]] 属性来进行判断。</li></ul></details> <h3 id="for-in和for-of的区别"><a href="#for-in和for-of的区别" class="header-anchor">#</a> for...in和for...of的区别</h3> <details class="custom-block details"><summary>答案</summary> <ul><li><p>for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；</p></li> <li><p>for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；</p></li> <li><p>对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；</p></li> <li><p>总结：for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。</p></li></ul></details></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2/22/2022, 11:29:59 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/markdown-blog/docs/theme-reco/htmlcss.html" class="prev">
            HTML+CSS知识点总结
          </a></span> <span class="next"><a href="/markdown-blog/docs/theme-reco/ts.html">
            TypeScript知识点总结
          </a></span></p></div> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:0;" data-v-cb1513f6></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/markdown-blog/assets/js/app.4ad08097.js" defer></script><script src="/markdown-blog/assets/js/3.ddd67056.js" defer></script><script src="/markdown-blog/assets/js/1.7a25059f.js" defer></script><script src="/markdown-blog/assets/js/28.1d169f61.js" defer></script>
  </body>
</html>
